<script>
import citys from '@/assets/citydata'

export default {
  data() {
    return {
      shopData: {
        pageNum: 1,
        pageSize: 5,
        phone: '',
        keyword: '',
        shopStatus: '',
        startTime: '',
        endTime: ''
      },
      shopDataList: [],
      date: '',
      total: 1,
      dialogFormVisible: false,
      addOrUpdateFlag: 1,
      title: '新增门店',
      address: '',
      citys: citys,
      aa:'',
      shop: {
        shopAddress: "",
        shopCity: "",
        shopDescribe: "",
        shopDistrict: "",
        shopImage: "",
        shopLatitude: "",
        shopLongitude: "",
        shopName: "",
        shopPhone: "",
        shopProvince: ""
      }
    }
  },
  methods: {
    //修改
    updateShop(row) {
      this.title = "修改门店信息";
      this.dialogFormVisible = true;
      this.shop = row;
      this.address = [this.shop.shopProvince, this.shop.shopCity, this.shop.shopDistrict];
      this.aa='shop/modifyShop'
    },
    //取消提交
    cancel() {
      this.dialogFormVisible = false;
      this.address = [];
      this.shop = {
        shopAddress: "",
        shopCity: "",
        shopDescribe: "",
        shopDistrict: "",
        shopImage: "",
        shopLatitude: "",
        shopLongitude: "",
        shopName: "",
        shopPhone: "",
        shopProvince: ""
      };
      this.getShopData()
    },
    //提交表单
    addSubmit() {
      this.$http.post(this.aa, this.shop)
          .then(res => {
            if (res.data.status == 200) {
              this.$message.success('操作成功！');
              this.getShopData()
              this.cancel()
            } else {
              this.$message.error('操作失败！')
            }
          })
      //community对象初始化
      // this.cancel()
    },
    // 选择省份地区
    selectAddress() {
      this.shop.shopProvince = this.address[0];
      this.shop.shopCity = this.address[1];
      this.shop.shopDistrict = this.address[2];
    },
    // 添加门店
    addShop() {
      this.dialogFormVisible = true;
      this.title = '新增小区';
      this.aa='shop/addShop';
    },
    handleSizeChange(val) {
      this.shopData.pageSize = val;
      this.getShopData()
    },
    handleCurrentChange(val) {
      this.shopData.pageNum = val
      this.getShopData()
    },
    getShopData() {
      this.$http.get('/shop/querySearchShopList',
          {
            params: this.shopData
          })
          .then(res => {
            // console.log(this.date)
            // console.log(res)
            if (res.status == 200) {
              this.shopDataList = res.data.data.list;
              this.total = res.data.data.total

            } else {
              this.$message.error('数据异常！')
            }

          })
          .catch(error => {
            this.$message.error('服务器异常！')
          })
    }
  },
  // 钩子函数，页面加载后直接执行代码
  mounted() {
    this.getShopData()
  },
  watch: {
    date() {
      if (this.date) {
        this.shopData.startTime = this.date[0];
        this.shopData.endTime = this.date[1]
      } else {
        this.$message.error('日期异常')
      }
    }
  }

}
</script>

<template>
  <div>
    <!-- 面包屑  -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>帮买取快递废品回收</el-breadcrumb-item>
      <el-breadcrumb-item>门店管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索框 -->
    <el-row>
      <!--    inline行列样式，行列平铺    -->
      <el-form :inline="true" :model="shopData" class="demo-form-inline" style="margin-top: 15px">
        <el-form-item label="门店名称：">
          <el-input v-model="shopData.keyword" clearable @clear="getShopData" placeholder="请输入门店名称"></el-input>
        </el-form-item>
        <el-form-item label="门店手机号：">
          <el-input v-model="shopData.phone" clearable @clear="getShopData" placeholder="请输入门店手机号"></el-input>
        </el-form-item>
        <el-form-item label="提交日期：">
          <el-date-picker
              v-model="date"
              end-placeholder="结束日期"
              range-separator="至"
              start-placeholder="开始日期"
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="warning" plain @click="getShopData">查 询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--  新增门店  -->
    <el-row>
      <el-button type="warning" plain @click="addShop">新增门店</el-button>
    </el-row>
    <!--  弹出框  -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible">
      <el-form :model="shop">
        <el-form-item label="门店名称" label-width="100px">
          <el-input v-model="shop.shopName" autocomplete="off" placeholder="请输入门店名称"></el-input>
        </el-form-item>
        <el-form-item label="门店手机号" label-width="100px">
          <el-input v-model="shop.shopPhone" autocomplete="off" placeholder="请输入门店手机号"></el-input>
        </el-form-item>
        <el-form-item label="具体地址" label-width="100px">
          <el-cascader
              v-model="address"
              :options="citys"
              @change="selectAddress" placeholder="请选择省市县"></el-cascader>
        </el-form-item>
        <el-form-item label="" label-width="100px">
          <el-input v-model="shop.shopAddress" autocomplete="off" placeholder="请输入小区详细地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="addSubmit">确 定</el-button>
      </div>
    </el-dialog>
    <!--  表格  -->
    <el-table border :data="shopDataList" style="width: 100%; margin-top: 10px; margin-bottom: 10px">
      <el-table-column label="门店名称" prop="shopName" align="center"></el-table-column>
      <el-table-column label="ID" prop="shopId" align="center"></el-table-column>
      <el-table-column label="门店手机号" prop="shopPhone" align="center"></el-table-column>
      <el-table-column label="门店地址" prop="shopAddress" width="180px" align="center"></el-table-column>
      <el-table-column label="营业时间" prop="addTime" align="center"></el-table-column>
      <el-table-column label="关联小区" prop="shopCommunitySort" align="center"></el-table-column>
      <el-table-column label="订单总数" prop="shopOrderCount" width="180px" align="center"></el-table-column>
      <el-table-column label="提交方式" prop="concernStatus" width="180px" align="center"></el-table-column>
      <el-table-column label="状态" prop="shopStatus" width="180px" align="center"></el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-link type="warning" :underline="false">门店管理</el-link>
          <el-link type="warning" :underline="false" @click="updateShop(scope.row)">修改</el-link>&nbsp;

          <!--                    {{scope.row}}-->
        </template>
      </el-table-column>
    </el-table>
    <!-- 跳转页 -->
    <el-row>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="shopData.pageNum"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="shopData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </el-row>
  </div>


</template>

<style scoped>

</style>